<template>
  <div class="jf-card">
    <div v-for="(item, index) in jfConfig" :key="index + 'jfl'">
      <div class="GdwyyAppItemCard" :class="['GdwyyAppItemCard--green']">
        <GdwyyAppSmallTitle :title="item.title" :showArrow="false"></GdwyyAppSmallTitle>

        <div :class="`content grid-4`">
          <div class="item fill-h flex-column flex-between" v-for="(child, index) in item.children" :key="index + 'p'">
            <div class="font-13 color333">
              {{ child.name }}
            </div>

            <div
              class="font-20 num"
              :class="{ 'num-mgl': child.icon, 'num-underline': Number(data[child.field]) > 0 }"
              @click="
                $emit('openDialog', {
                  ...child,
                  num: data[child.field],
                  kpiCode: child.field,
                })
              "
            >
              <!-- @click="handleopenDialog({ ...child, num: data[child.field] })" -->

              {{ data[child.field] || 0 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { sql2apiAction } from '@/api/manage'
import { yrmxDialogUrlConfig } from '../common'

export default {
  components: { GdwyyAppSmallTitle },
  props: {
    queryParam: {
      type: Object,
      default: () => {},
    },
    pageType: {
      type: String,
      default: 'morning',
    },
  },
  data() {
    return {
      data: {},
      jfList: [],
      jfConfig: [
        {
          title: '装机',
          children: [
            {
              name: '派单量',
              field: 'JF_0001',
            },
            {
              name: '在途量',
              field: 'JF_0002',
            },
            {
              name: '竣工量',
              field: 'JF_0003',
            },
            {
              name: '交付量',
              field: 'JF_0004',
            },
          ],
        },
        {
          title: '移机',
          children: [
            {
              name: '派单量',
              field: 'JF_0005',
            },
            {
              name: '在途量',
              field: 'JF_0006',
            },
            {
              name: '竣工量',
              field: 'JF_0007',
            },
            {
              name: '交付量',
              field: 'JF_0008',
            },
          ],
        },
        {
          title: '修机',
          children: [
            {
              name: '派单量',
              field: 'JF_0009',
            },
            {
              name: '在途量',
              field: 'JF_0010',
            },
            {
              name: '竣工量',
              field: 'JF_0011',
            },
          ],
        },
      ],

      url: {
        chJf: '2c3a07178ba92724018bb9eab5bc0006',
        xhJf: '2c3a07178ba92724018bc78b84db000c',
      },
    }
  },
  watch: {
    queryParam: {
      deep: true,
      handler: function () {
        this.loadData()
      },
    },
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const params = {
        ...this.queryParam,
      }
      let url = ''
      if (this.pageType == 'morning') url = this.url.chJf
      if (this.pageType == 'evening') url = this.url.xhJf
      sql2apiAction(url, params).then((res) => {
        const data = res.result
        this.data = data[0] || {}
      })
    },
    handleopenDialog(item) {
      const { num } = item
      if (!Number(num)) return
      this.$open('/publicline/morningEvening/indicatorDetails', {
        url: yrmxDialogUrlConfig[this.pageType].zl_jf,
        queryParams: JSON.stringify({ ...this.queryParam, kpiCode: item.field }),
        type: 'zl_jf',
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppItemCard {
  .num-underline {
    text-decoration: underline;
  }
  .content {
    padding: 2.6667vw 4vw;
    box-sizing: border-box;
    display: grid;
    .num {
      margin-top: 4vw;
    }
    &.grid-3 {
      grid-template-columns: 1.5fr 1fr 1fr;
      div:nth-child(3n) {
        justify-self: end;
        min-width: 18.6667vw;
      }
    }
    &.grid-4 {
      grid-template-columns: repeat(4, 16vw);
      justify-content: space-between;
      .item {
        justify-self: center;
      }
    }
  }
  .icon {
    width: 3.7333vw;
    height: 3.7333vw;
  }
  .num-mgl {
    margin-left: 4.8vw;
  }
  &--green {
    ::v-deep {
      .small-title::before {
        background: @main-green-color;
      }
    }
    .num {
      color: @main-green-color;
    }
    .content {
      .bg('jfzj_card_bg.png');
      width: 90.4vw;
    }
  }
  &--org {
    ::v-deep {
      .small-title::before {
        background: @main-org-color;
      }
    }
    .num {
      color: @main-org-color;
    }
    .content {
      .bg('zyx_bg.png');
      width: 90.4vw;
    }
  }
  &--red {
    ::v-deep {
      .small-title::before {
        background: @main-red-color;
      }
    }
    .num {
      color: @main-red-color;
    }
    .content {
      .bg('bq_bg.png');
      width: 90.4vw;
    }
  }
}
</style>